<template>
  <div class="detail">
    <div class="erweima" v-if="follow">
      <div class="erweima-container">
        <a class="close" @click="changeFollow">X</a>
        <div class="title">扫描一下二维码关注后才可以投票或报名哦。</div>
        <img src="../assets/images/follow.png" />
      </div>
    </div>
    <header-component></header-component>
    <div class="image">
      <img :src="detail.imgUrl">
    </div>
    <div class="title">{{detail.title}}</div>
    <div class="msg">
      <span class="id">{{detail.number}}号</span>
      <span class="author">{{detail.realName}}</span>
      <span class="num">{{detail.votes}}票</span>
    </div>
    <div class="votenbtn"><a v-on:click="addVotesFun(detail.id)" class="iconfont icon-xin"><span>献爱心</span></a></div>
    <div class="opera">
      <router-link to="/">回到首页</router-link>
      <a>邀请好友投票</a>
    </div>
    <footer-msg></footer-msg>
  </div>
</template>
<style scoped>
  .detail .title{
    color:rgb(217,0,60);
    font-size:0.16rem;
  }
  .detail .msg{
    text-align:center;
    color:rgb(217,0,60);
  }
  .detail .msg .id{
    float:left;
  }
  .detail .msg .num{
    float:right;
  }
  .detail .opera{
    font-size:0;
    margin-top:0.05rem;
  }
  .detail .opera a{
    display:inline-block;
    width:48%;
    margin-right:4%;
    line-height:0.3rem;
    background: rgb(217,0,60);
    color:#fff;
    font-size: .14rem;
    text-align:center;
    border-radius: 0.1rem;
  }
  .detail .opera a:last-child{
    margin-right:0;
  }
  .votenbtn{
        text-align: center;
  }
  .votenbtn a{
        display: inline-block;
    color: #D9003C;
    font-size: 1rem;
    position: relative;
    vertical-align: middle;
    text-shadow: 0 0.08rem 0 #86082B;
  }
  .votenbtn a span{
        color: #fff;
    font-size: .16rem;
    font-weight: bolder;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 50%;
    margin-top: -0.12rem;
    text-shadow: none;
  }
</style>
<script>
  import wx from 'weixin-js-sdk'
  import HeaderComponent from './Header.vue'
  import FooterMsg from './FooterMsg.vue'
  export default{
        data(){
            return{
              detail:"",
              follow:false
            }
        },
        components:{
            HeaderComponent,FooterMsg
        },
        mounted(){
          this.axios.get("/api/vote/1/candidate/"+this.$route.params.id).then((response) => {
            this.detail=response.data.object;
            console.log(response.data);
          })
        },
        methods:{
          addVotesFun:function(id){
            this.axios.post("/api/vote/1/candidate/"+this.$route.params.id).then((response) => {
              if(response.data.code===200){
                alert(response.data.message);
                this.$router.go(0);
              }else{
                if(response.data.message==="投票必须先关注公众号"){
                console.log(4654);
                  this.follow=true;
                  return false;
                }
                alert(response.data.message);
              }

            })
          },
          changeFollow:function(){
            this.follow=false;
          }
        }
    }

</script>
